<template>
    <div id="add-edit-model">
        <div class="set-s">
            <el-dialog
                title="问题随手拍"
                v-model="isPhoto" 
                draggable 
                :close-on-click-modal="false" 
                :before-close="handleClose"
                :destroy-on-close="true"
                :fullscreen="true"
            >
                <div id="friend-merchant-manage" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
                    <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;">
                        <div class="search-s page-public-s" style="box-sizing: border-box;">
                            <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                                <el-form class="box-f" ref="queryForm" :inline="true">
                                    <el-form-item label="问题描述：">
                                        <el-input v-model="v_Reason" placeholder="请输入问题描述" />
                                    </el-form-item>
                                    <el-form-item >
                                        <el-button @click='searchClick' icon="ele-Search" type="primary"> 查询 </el-button>
                                        <el-button  @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                                        <el-button @click="nodeClick('',getData)" icon="ele-Plus" type="primary"> 新增 </el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>
                        </div>

                        <div style="box-sizing: border-box;" class="flex-1 pos-r">
                            <div class="pos-a w-h-100" style="box-sizing: border-box;">
                                <el-card class="box-card w-h-100" shadow="never">
                                    <div style="" class="w-h-100 ver-flex">
                                        <div class="flex-1 pos-r">
                                            <div class="pos-a w-h-100">
                                                <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                                    <el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />
                                                    <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_Reason" label="问题描述"  align="center" />
                                                    <el-table-column min-width="160" :show-overflow-tooltip="true" prop="createdUserName" label="创建人"  align="center" />
                                                    <el-table-column min-width="160" :show-overflow-tooltip="true" prop="createdTime" label="创建时间"  align="center" />
                                                    <el-table-column min-width="160" :show-overflow-tooltip="true" prop="updatedUserName" label="更新人"  align="center" />
                                                    <el-table-column min-width="160" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间"  align="center" />
                                                    <el-table-column min-width="180" label="操作" align="center" fixed="right">
                                                        <template #default="scope">
                                                            <div class="operate-s">
                                                                <el-button @click="nodeClick(scope.row,getData)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                                <el-button @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </div>
                                        <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                            <el-pagination
                                                v-model:currentPage="pageNo"
                                                v-model:page-size="pageSize"
                                                :total="totalRows"
                                                :page-sizes="[10, 20, 50, 100]"
                                                small
                                                background
                                                @size-change="handleSizeChange"
                                                @current-change="handleCurrentChange"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                class="w-h-100"
                                            />
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <el-button @click="cancelUseClick">关 闭</el-button>
                </template>
            </el-dialog>
        </div>
        <!-- 表单模型 -->
        <ModelDialog
            :isDialog="isDialog"
            :modelInfo="modelInfo"
            @cancelModelClick="cancelModelClick"
            @controlModelClick="controlModelClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , watch } from 'vue';
import { ElMessage, ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn , ElMessageBox } from 'element-plus';
import getTableData from '/@/utils/getTableData';
import ModelDialog from '../model-dialog.vue';
import { SMSIPReasonRecordDelete, SMSIPReasonRecordAdd, SMSIPReasonRecordPage , SMSIPReasonRecordUpdate } from '/@/api/centerControl/sms';
import { sysFileInfoYitId , sysFileInfoMultipleUpload } from '/@/api/centerControl/pubilc';
export default defineComponent( {
    name: 'issue-photo',
    components: {
        ModelDialog,
    },
    props: {
        isPhoto:{
            type: Boolean,
            default: false,
        },
        photoInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const v_Reason = ref('');
        const searchObj = reactive({
            v_Reason: '',
            l_IPTaskId: 0,
        });
        const modelInfo = ref('');
        let fileId = 0;
        let taskId = 0;
        let updateFun: Function = () => {};
        let rowInfo: any;

        /*** searchClick 查询按钮点击事件 */
        const searchClick = () => {
            if(v_Reason.value !== '') {
                searchObj.v_Reason = v_Reason.value;
            }
            else{
                ElMessage({
                    type: 'warning',
                    message: '请输入需要查询的数据',
                })
            }
        };

        /*** 新增/编辑事件 */
        const nodeClick = async(val: any, uploadFun: Function) => {
            // 基础验证
            let basicForm = {
                v_Reason: val === '' ? '' : val.v_Reason,
            };
            // 表单基础设置
            let modelBsc: any = {
                modeWidth: '50%',
                labelWidth: '100px',
                rules: {v_Reason:[{required: true, message: '请输入问题描述', trigger: 'blur'}],},
                cancelInfo: '取消',
                controlInfo: '确定',
                titleCon: '问题随手拍',
            };
            // 表单核心内容设置
            let modelForm: any = [
                {
                    type: 'input', 
                    label: '问题描述', 
                    prop: 'v_Reason', 
                    placeholder: '请输入问题描述', 
                }
            ];

            let setObj: any = {};
            setObj.ruleForm = basicForm;
            setObj.basicInfo = modelBsc;
            setObj.VNodeData = modelForm;
            setObj.modelType = {
                form: true,
                upload: true,
                table: false,
            };
            if(val === '') {
                await getXhFun().then((res: any) => { 
                    setObj.rowData = { l_FileId: res }; 
                    fileId = res;
                    rowInfo = '';
                });
            }else {
                setObj.rowData = val;
                fileId = val.l_FileId;
                rowInfo = val;
            }
            modelInfo.value = JSON.stringify(setObj);
            updateFun = uploadFun;
            isDialog.value = true;
        }

        /** 获取雪花id */
        const getXhFun = async() => {
            let res: any;
            res = await sysFileInfoYitId({});
            if(res.success) return res.data;
        }

        /*** 删除事件 */
        const deleteHandle = (val: number, uploadFun: Function) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await SMSIPReasonRecordDelete(param);
                    if(res.success){
                        uploadFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }

        /*** resetClick 重置按钮点击事件 */
        const resetClick = () => {
            v_Reason.value = '';
            searchObj.v_Reason = '';
        };

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelPhotoClick')
        }

        /*** 监听isPhoto的变化 */
        watch(() => props.isPhoto,(newVal) => {
            if(newVal){
                taskId = JSON.parse(props.photoInfo).id;
                searchObj.l_IPTaskId = JSON.parse(props.photoInfo).id;
            }
        })

        /*** isPhoto 响应弹窗的关闭  */
        const isPhoto = computed(() => {
            return props.isPhoto
        })

        /*** 表单模型操作 */
        const isDialog = ref(false); // 表单模型变量
        /*** 表单模型取消 */
        const cancelModelClick = () => {
            isDialog.value = false;
        }
        /*** 表单模型提交 */
        const controlModelClick = async(val: object | any) => {
            let item = val;
            let param: any = {};
            param.v_Reason = item.setFormData.v_Reason;
            param.l_IPTaskId = taskId;
            param.l_FileId = fileId;
            if(item.modelType.upload) await uploadFile(item.setUploadData);
            await submitFun(param);
            isDialog.value = false;
        }
        /*** 文件上传 */
        const uploadFile = async(fileArr: any[]) => {
            let setArr:any = [];
            fileArr.map((i: any) => {
                setArr.push(i.raw);
            });
            let res: any;
            let param: any = {};
            param.files = setArr;
            param.sourceId = fileId;
            param.sourceType = 10;
            res = await sysFileInfoMultipleUpload(param);
            if(res.success) return;
        }
        /*** 表单数据新增 */
        const submitFun = async(val: object | any) => {
            let res: any;
            if(rowInfo !== ''){
                let param = {
                    v_Reason: val.v_Reason,
                    id: rowInfo.id,
                };
                res = await SMSIPReasonRecordUpdate(param)
            }else{
                res = await SMSIPReasonRecordAdd(val);
            }
            if(res.success) updateFun();
        }
        /*** 表单模型操作 */

        return {
            ...getTableData(SMSIPReasonRecordPage,{},searchObj),
            handleClose,
            cancelUseClick,
            isPhoto,
            
            searchClick,
            resetClick,
            nodeClick,
            deleteHandle,
            v_Reason,
            isDialog,
            modelInfo,
            cancelModelClick,
            controlModelClick,
        }
    },
} )
</script>
<style scoped lang="scss">
.set-s{
    :deep(.el-dialog__body){
      height: calc(100vh - 110px);
      max-height: none!important;
      overflow-y: hidden;
    }
}
</style>